import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col } from 'antd';
import styles from './Grid.css';

class Grid extends Component {
    constructor(props) {
        super(props);
        this.state = {
            left: 0,
            target: 'prev',
            mainH: 0, // 高度
        }
    }

    handleClick(elem) {
        if (this.state.target === elem) {
            return false;
        } else {
            this.setState({
                left: this.state.left === 0 ? '-100%' : 0,
                target: elem
            })
        }

    }
    componentWillMount() {
        // 父页面
        this.setState({ mainH: global.MainH });
        const _this = this;
        // 检测窗体大小变化
        window.onresize = function () {
            const MainH = document.documentElement.clientHeight - 1 || document.body.clientHeight - 1;
            _this.setState({ mainH: (MainH - 295) });
            // global.MainH = (MainH - 180);
        }

    }

    handleOpenDetail(title) {
        let ROUTER = '';
        switch (title) {
            case '开卡':
                ROUTER = '/cardIndex';
                this.props.dispatch(routerRedux.push({
                    pathname: '/ReadIDCard',
                    query: {
                        route: ROUTER
                    }
                }));
                // global.ROUTER = ROUTER;
                break;
            case '转账':
                ROUTER = '/'
                break;
            case '自助签约':
                this.props.dispatch(routerRedux.push('/SigningList'));
                break;
            
            case '我的':
                this.props.dispatch(routerRedux.push('/User'));
                break;
            default:
                break;
        }
        // this.props.dispatch(routerRedux.push({
        //     pathname: '/getCard',
        //     data: ROUTER
        // }));
    }

    render() {
        return (
            <div className={styles.normal}>
                <div className={styles.grad}>
                    <div className={styles.gradLeft}>
                        <div className={styles.gradItem + ' ' + styles.gradItem1} onClick={this.handleOpenDetail.bind(this, '开卡')}>
                            我要办卡<span>OPEN AN ACCOUNT</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem3} onClick={this.handleOpenDetail.bind(this, '我的')}>
                            我的账户<span>MY ACCOUNT</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem2} onClick={this.handleOpenDetail.bind(this, '转账')}>
                            转账汇款<span>TRANSFER REMITTANCE</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem4} onClick={this.handleOpenDetail.bind(this, '自助签约')}>
                            自助签约<span>FINANCIAL SERVICE</span>
                        </div>
                    </div>
                    <div className={styles.gradRight}>
                        <div className={styles.gradItem}>
                            存取服务<span>DEPOSIT WITHDRAWAL</span>
                        </div>
                        <div className={styles.gradItem}>
                            便民服务<span>CIVILIAN SERVICE</span>
                        </div>
                        <div className={styles.gradItem}>
                            缴费业务<span>PAYMENT SERVICE</span>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}

export default connect()(Grid);